<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }

    </style>

    <script type="text/javascript">

		/**
		 * 09.定时器练习-点击按钮后box1向左移动
		 * 1.点击按钮以后，开启一个定时器，每隔30ms，让box1的left值减小
		 * 2.当box1移动到0px时，使其停止执行动画
		 * 3.当用户再次点击按钮时，关闭上一个定时器，开启一个新的定时器
		 * 4.当用户点击按钮以后，box1向左移动，当box1移动到0px时，使其停止执行动画
		 */
        window.onload = function () {

            //获取box1
            var box1 = document.getElementById("box1");

            //获取btn01
            var btn01 = document.getElementById("btn01");
            //获取btn02
            var btn02 = document.getElementById("btn02");


            //点击按钮以后，使box1向右移动（left值增大）
            btn01.onclick = function () {
                move(box1, 800, 10);
            };


            //点击按钮以后，使box1向左移动（left值减小）
            btn02.onclick = function () {
                move(box1, 0, 10);
            };

        };

        //定义一个变量，用来保存定时器的标识
        var timer;

        /**
		 * 公共方法:尝试创建一个可以执行简单动画的函数
         * 参数：
         * 	obj:要执行动画的对象
         * 	target:执行动画的目标位置
         * 	speed:移动的速度(正数向右移动，负数向左移动)
         */
        function move(obj, target, speed) {
            //关闭上一个定时器
            clearInterval(timer);

            //获取元素目前的位置
            var current = parseInt(getStyle(obj, "left"));

            //todo 重点：兼容判断速度的正负值
            //如果从0 向 800移动，则speed为正
            //如果从800向0移动，则speed为负
            if (current > target) {
                //此时速度应为负值
                speed = -speed;
            }
            console.log("speed:移动的速度(正数向右移动，负数向左移动)========="+speed);

            //开启一个定时器，用来执行动画效果
            timer = setInterval(function () {

                //获取box1的原来的left值
                var oldValue = parseInt(getStyle(obj, "left"));

                //在旧值的基础上增加
                var newValue = oldValue + speed;
                console.log("距离左边起点，当前移动的距离========="+newValue);

                //判断newValue是否大于800
                //从800 向 0移动
                //向左移动时，需要判断newValue是否小于target
                //向右移动时，需要判断newValue是否大于target
                if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                    newValue = target;
                }

                //todo 重点：将新值设置给box1的left属性，
                //style.left用于设定元素距离其包含块（通常是最近的已定位祖先元素）左侧的距离。
                obj.style.left = newValue + "px";

                //当元素移动到0px时，使其停止执行动画
                if (newValue === target) {
                    //达到目标，关闭定时器
                    clearInterval(timer);
                }
            }, 30);
        }


        /*
         * 定义一个函数，用来获取指定元素的当前的样式
         * 参数：
         * 		obj 要获取样式的元素
         * 		name 要获取的样式名
         */
        function getStyle(obj, name) {

            if (window.getComputedStyle) {
                //正常浏览器的方式，具有getComputedStyle()方法
                return getComputedStyle(obj, null)[name];
            } else {
                //IE8的方式，没有getComputedStyle()方法
                return obj.currentStyle[name];
            }

        }


    </script>
</head>
<body>

<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>

<br/><br/>

<div id="box1"></div>

<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>

</body>
</html>
